<template>
<div>
  <V-CommonHeaderLeft>
     <div id="app">
    <el-row>
      <!-- 头部 -->
      <div class="header">
        <el-col :span="4" class="header-nav">
          <router-link to="/">首页&nbsp;&nbsp;/</router-link>
          <router-link to="/">营销&nbsp;&nbsp;/</router-link>
          <router-link to="/">订单促销&nbsp;&nbsp;/</router-link>
          <router-link to="/">促销详情</router-link>
        </el-col>
      </div>
    </el-row>
    <!-- 第二部分 -->
    <div class="contents">
      <div class="contents-header">
        <h3>促销详情</h3>
        <div class="copy">
          <!-- <img src="" alt=""> -->
          <span></span>
          <div>
            <router-link to='/marketingOrderCopy'>复制新增</router-link>
          </div>
        </div>
      </div>
      <el-row class="contents-details">
        <el-col :span="2">
          <div class="contents-details-left">
            <p>促销时间</p>
            <p>阶梯促销</p>
            <p>促销规则</p>
            <p>客户类型</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="contents-details-center">
            <p>2019-06-03 08:53 ~ 2019 06-03 08:57</p>
            <p>启用</p>
            <p>
              <span>订单满赠</span>
              <span>单笔订货金额≥</span>
              <span>100</span>
              <span>元</span>
              <span>，获赠品</span>
              <span>VB钙片(一个月量)</span>
              <span>10</span>
              <span>个</span>
            </p>
            <p>普通代理商、VIP代理商、一级经销商、二级经销商</p>
          </div>
        </el-col>
        <el-col :span="1" :offset="7">
          <img src='' class='rightImg'>
        </el-col>
      </el-row>
    </div>
  </div>
  </V-CommonHeaderLeft>
</div>
</template>

<script>
import VCommonHeaderLeft from './../common/vCommonHeaderLeft/VCommonHeaderLeft'
export default {
  components: {
    VCommonHeaderLeft
  },
  data () {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  width:100%;
  background-color: #f2f5f7;
  height: 100%;
  padding: 15px 10px 0px 10px;
}
.header {
  height: 45px;
  .header-nav {
    line-height: 30px;
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    padding-left: 10px;
    span {
      display: inline-block;
      margin-left: 10px;
    }
    a {
      color: #999999;
    }
    a:hover {
      color: #20ade5;
    }
  }
  .header-img {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid #dce4e7;
  }
}
.header-nav a:nth-child(4) {
  color: #333;
}
.header-nav a:nth-child(4):hover {
  color: #333;
}
.contents {
  margin: 0px 10px;
  background-color: #fff;
  height: 500px;
}
.contents-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e3e3e3;
  padding: 15px 45px 0px 25px;
}
.contents-header > h3 {
  color: #20ade5;
  font-size: 16px;
  letter-spacing: 1px;
  border-bottom: 2px solid #20ade5;
  width: 110px;
  padding-bottom: 15px;
  text-align: center;
}
.copy {
  display: flex;
}
.copy span:nth-child(1) {
  display: block;
  width: 18px;
  height: 18px;
  background-color: #20ade5;
  border-radius: 50%;
  margin-top: 3px;
}
.copy>div>a {
  color: #20ade5;
  margin-left: 5px;
}
.contents-details {
  padding: 30px 0px 0px 25px;
  font-size: 14px;
  color: #666666;
}
.contents-details-left {
}
.contents-details-left > p {
  line-height: 35px;
}
.contents-details-center {
  line-height: 35px;
}
.contents-details-center > p:nth-child(3) span:nth-child(1) {
  border: 1px solid #ff4848;
  color: #ff4848;
  border-radius: 2px;
  margin-right: 5px;
  font-size: 12px;
}
.contents-details-center > p:nth-child(3) span:nth-child(3) {
  width: 100px;
  border-bottom: 1px solid #e3e3e3;
  display: inline-block;
  text-align: center;
  line-height: 20px;
}
.contents-details-center > p:nth-child(3) span:nth-child(3):hover {
  border-bottom: 1px solid #20ade5;
}
.contents-details-center > p:nth-child(3) span:nth-child(6) {
  color: #20ade5;
}
.contents-details-center > p:nth-child(3) span:nth-child(7) {
  width: 100px;
  border-bottom: 1px solid #e3e3e3;
  display: inline-block;
  text-align: center;
  line-height: 20px;
}
.contents-details-center > p:nth-child(3) span:nth-child(7):hover {
  border-bottom: 1px solid #20ade5;
}
.contents-details-center > p:last-child {
  color: #333;
}
.rightImg {
  width:105px;
  height:105px;
  border:1px solid;
  border-radius: 50%;
  margin-top:20px;
}
</style>
